body {
    background-image: url(../img/bk.1ac8d262.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#app {
    margin: 0 auto;

    .top {
        width: 100%;
        height: 1rem;
        border-bottom: 1px solid white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.2rem;

        .left {
            width: 30%;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                animation: breathe 2s infinite;
                -webkit-animation-timing-function: easeOutBack;
                animation-timing-function: easeOutBack;

                @keyframes breathe {
                    0% {
                        -webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
                        transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
                        opacity: .4;
                    }

                    50% {
                        -webkit-transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
                        transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
                        opacity: 1;
                    }

                    100% {
                        -webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
                        transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
                        opacity: .4;
                    }
                }
            }
        }

        .right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.7rem;
            height: 0.7rem;
            font-size: .5rem;
            border: 2px solid white;
            border-radius: 100% 100%;
            
            // background-repeat: no-repeat;
            // background-size: .7rem auto;
            // background-position: 0 0.1rem;
        }
    }

    .search {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        input {
            width: 90%;
            height: 0.7rem;
            font-size: .30rem;
            outline: none;
            border: 0;
            border-radius: 0.4rem 0.4rem;
            padding-left: 0.8rem;

        }

        .img {
            width: 0.5rem;
            height: 0.5rem;
            position: absolute;
            top: 25%;
            left: 0.6rem;
            background-image: url(../img/搜索.png);
            background-repeat: no-repeat;
            background-size: 0.4rem auto;
            background-position: 0 0.05rem;
        }
    }

    .box {
        width: 100%;
        background-color: white;

        .box-active{
            position: fixed;
            top: 0;
        }
        .box_top {
            z-index: 999;
            width: 100%;
            height: 1rem;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;

            

            ul {
                width: 98%;
                height: 0.8rem;
                font-size: 0.37rem;
                display: flex;
                align-items: center;
                justify-content: space-between;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.3rem;
                }
            }
        }

        .contain {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding-top: 0.3rem;
            margin-bottom: 1rem;

            .big {
                width: 90%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 0.5rem;
                box-shadow: 0 0px 3px 4px rgba(167, 173, 204, 0.6);
            }

            .img {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 100%;
                }
            }

            .wz {
                width: 95%;
                height: 1rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: flex;
                align-items: center;
                font-size: 0.35rem;
            }

            .bottom {
                width: 100%;
                height: 0.6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 0.2rem;
                padding: 0.2rem;
                padding-bottom: 0.5rem;
                position: relative;

                .yj {
                    width: .3rem;
                    height: .3rem;
                    position: absolute;
                    right: .7rem;
                    background: url(../img/眼睛\ .png) no-repeat;
                    background-size: 0.3rem auto;
                    background-position: 0 0.05rem;


                }
            }
        }
    }

    .footer {
        width: 100%;
        height: 1.2rem;
        background-color: white;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;

        .left {
            flex: 1;
            height: 1rem;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            justify-content: space-around;
            align-items: center;
            font-size: 0.3rem;
            .iconfont{
                font-size: .5rem;
            }
        }
    }
    
/* 回到顶部 */
.footer_e {
    position: fixed;
    right: .1rem;
    bottom: 1.5rem;
    width: .5rem;
    height: .5rem;
    display: none;
  }
  
}